<template>
  <el-row class="top-container" :style="{top: topContainerTop + 'px'}">
    <el-col class="center">
      <slot></slot>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { _getWindowClient } from '@/utils/public.js';
  const topContainerTop = ref(0);
  const handler2Resize = () => {
    const _w = _getWindowClient().width;
    if(_w <= 1300) {
      topContainerTop.value = 40;
    }
    else {
      topContainerTop.value = 0;
    }
  };
  onMounted(() => {
    // resize : 控制 topContianer top
    handler2Resize();
    window.addEventListener('resize', () => {
      handler2Resize();
    }, false);
  });
</script>

<style lang="scss">
  .top-container {
    position: absolute;
    height: 60px;
    top: 0;
    left: calc(50% - 50px);  // 计算 card-edit-phone 的偏移量
    transform: translateX(-50%);
    z-index: 10;

    display: flex;
    align-items: center;
    transition: all .1s ease-in-out;

    .plugins-nav {
      margin-right: 6px;
      &:last-child {
        margin-right: 0;

        .plugins-nav-btn{
          border-right: none;
        }
      }
    }
    .plugins-nav-btn {
      padding: 4px 6px 4px 6px;

      color: #fff;
      border-right: 1px solid #fff;
      border-radius: 0;
    }
    .plugins-nav-btn [class*="el-icon-"]+span {
      margin-left: 0 !important;
    }
  }
  .center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 34px;
		padding-left: 6px;
		// text-align: center;

		background: #127BFF;
		border-radius: 3px;
	}
  .right {
		text-align: right;
	}
</style>
